<template>
  <div>
      <div>
          <h3>用户： 
            <span v-if="username">{{username}}</span> 
            <span v-else><router-link to="/login1" >请登录</router-link></span></h3>
        <hr>
      </div>
      <div>
          <h2>图书列表</h2>
           <p v-for="i in books_list" :key="i.id">
              <router-link :to="{'path':'/show','query':{'id':i.id}}">{{i.title}}</router-link>
          </p>
      </div>

      <div>
          <input type="button" value="上一页" @click="btn(cur_num-1)">
          <input type="button" v-for="num in page_list" :key="num" :value="num" @click="btn(num)">
          <input type="button" value="下一页" @click="btn(cur_num+1)">
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            username:sessionStorage.getItem('username'),
            books_list:[],
            page_list:[],
            cur_num:1
        }
    },created(){
        axios.get('http://127.0.0.1:8000/books').then(resp=>{
            console.log(resp.data)
            this.books_list=resp.data.data
            this.page_list=resp.data.book_list
        }).catch(error=>{
            console.log(error)
        })
    },methods:{
        btn(num){
            this.cur_num=num
          axios.get('http://127.0.0.1:8000/books?num='+num).then(resp=>{
              console.log(resp.data)
              this.books_list=resp.data.data
              this.page_list=resp.data.book_list
          }).catch(error=>{
              console.log(error)
          })
        }
    }
}
</script>

<style>

</style>




